<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
	<title>乐优商城--结算页</title>

	<link rel="stylesheet" type="text/css" href="css/webbase.css"/>
	<link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css"/>
</head>

<body>
<!--head-->
<div id="orderInfoApp">
	<div class="top">
		<shortcut/>
	</div>

	<div class="cart py-container">

		<!--logoArea-->
		<div class="logoArea">
			<div class="fl logo"><span class="title">结算页</span></div>
		</div>

		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
			<div class="checkout-steps">
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd" @click="addAddress()">新增收货地址</a></span>
					</h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<ul class="addr-detail">
							<li class="addr-item" v-for="(a,i) in addresses" :key="i">
								<div>
									<div :class="{con:true,name:true,selected:selectedAddress == i}"><a
											href="javascript:;" @click="selectedAddress=i">{{a.uname}}<span
											title="点击取消选择"></span>&nbsp;</a></div>
									<div class="con address">{{a.province + a.city + a.uarea + a.ad}} <span>{{a.phone}}</span>
										<span class="base" v-if="a.ifdefault">默认地址</span>

										<span :class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" href="javascript:;" @click="address = addresses[i],flag=true">编辑</a>&nbsp;&nbsp;
											<a href="javascript:;" @click="deleteAddress(a.id)">删除</a></span>
									</div>
									<div class="clearfix"></div>
								</div>

							</li>
						</ul>
						<!--添加地址-->
						<div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit" style="width:580px;">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
										<h4 id="myModalLabel" class="modal-title">{{flag? '编辑':'新增'}}地址</h4>
									</div>
									<div class="modal-body">
										<form action="" class="sui-form form-horizontal" @submit.prevent="submit">
											<div class="control-group">
												<label class="control-label">收货人：</label>
												<div class="controls">
													<input type="text" class="input-medium" name="uname" v-model="address.uname">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">所在地区：</label>
												<div id="test">
													省：
													<select v-model="provinSelected">
														<option v-for="item in provinList" :value="item.id">{{item.province}}</option>
													</select>
													市：
													<select v-model="citySelected">
														<option v-for="item in cityList" :value="item.id">{{item.city}}</option>
													</select>
													区：
													<select v-model="areaSelected">
														<option v-for="item in areaList" :value="item.id">{{item.area}}</option>
													</select>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">详细地址：</label>
												<div class="controls">
													<input type="text" class="input-large" name="ad" v-model="address.ad">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">联系电话：</label>
												<div class="controls">
													<input type="text" class="input-medium" name="phone" v-model="address.phone">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">邮箱：</label>
												<div class="controls">
													<input type="text" class="input-medium" name="email" v-model="address.email">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">地址别名：</label>
												<div class="controls">
													<input type="text" class="input-medium" :value="an" name="an" >
												</div>
												<div class="othername">
													建议填写常用地址：<a href="javascript:;" class="sui-btn btn-default" @click="changevalue('家里')">家里</a>　<a href="javascript:;" class="sui-btn btn-default" @click="changevalue('父母家')">父母家</a>　<a href="javascript:;" class="sui-btn btn-default" @click="changevalue('公司')">公司</a>
												</div>
											</div>

										</form>


									</div>
									<div class="modal-footer">
										<button type="button" data-ok="modal" class="sui-btn btn-primary btn-large" @click="submitAddress()">确定</button>
										<button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
									</div>
								</div>
							</div>
						</div>
						<!--确认地址-->
					</div>
					<div class="hr"></div>

				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li :class="{selected:order.paymentType==1}" @click="order.paymentType=1">微信付款<span
									title="点击取消选择"></span></li>
							<li :class="{selected:order.paymentType==2}" @click="order.paymentType=2">货到付款<span
									title="点击取消选择"></span></li>
						</ul>
					</div>
					<div class="hr"></div>
					<div class="step-tit">
						<h5>送货清单</h5>
					</div>
					<div class="step-cont">
						<ul class="send-detail">
							<li v-for="(cart,i) in carts" :key="i">
								<div class="sendGoods">
									<ul class="yui3-g">
										<li class="yui3-u-1-6">
											<span><img width="70px" height="70px" :src="cart.image"/></span>
										</li>
										<li class="yui3-u-7-12">
											<div class="desc">{{cart.title}}</div>
											<div class="seven">
												<span v-for="(v) in JSON.parse(cart.ownSpec)">{{v+"  "}}</span>
											</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="price">￥{{ly.formatPrice(cart.price*cart.num)}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="num">X{{cart.num}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="exit">有货</div>
										</li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div class="hr"></div>
				</div>
				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="order-summary">
			<div class="static fr">
				<div class="list">
					<span><i class="number">{{totalNum}}</i>件商品，总商品金额</span>
					<em class="allprice">¥{{ly.formatPrice(totalPay)}}</em>
				</div>
				<div class="list">
					<span>返现：</span>
					<em class="money">¥{{ly.formatPrice(order.discount)}}</em>
				</div>
				<div class="list">
					<span>运费：</span>
					<em class="transport">¥{{ly.formatPrice(order.postFee)}}</em>
				</div>
			</div>
		</div>
		<div class="clearfix trade">
			<div class="fc-price">应付金额:　<span class="price">¥{{ly.formatPrice(actualPay)}}</span></div>
			<div class="fc-receiverInfo">
				寄送至:{{addresses[selectedAddress].ad}}
				收货人：{{addresses[selectedAddress].uname}} {{addresses[selectedAddress].phone}}
			</div>
		</div>
		<div class="submit">
			<a class="sui-btn btn-danger btn-xlarge" href="javascript:;" @click="submit">提交订单</a>
		</div>
	</div>

</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var orderInfoVm = new Vue({
        el: "#orderInfoApp",
        data: {
            ly,
            address:{
                an:"",
                province:"",
                city:"",
                uarea:""
            },
            flag:false,
            user:{},
            provinRows:[],
            cityRows:[],
            areaRows:[],
            provinSelected:"",
            provinList:[],
            citySelected:"",
            cityList:[],
            areaSelected:"",
            areaList:[],
            carts: [],
            addresses: [],
            selectedAddress: 0,
            order: {
                paymentType: 1, //默认支付方式,微信支付
                postFee: 0, //邮费
                discount: 0, //优惠
                buyerMessage:null,//买家留言
                invoiceType:0,
                sourceType:2
            }
        },
        created() {
            this.loadData();
        },
        components: {
            shortcut: () => import("/js/pages/shortcut.js")
        },
        computed: {
            totalNum() {
                return this.carts.reduce((c1, c2) => c1 + c2.num, 0)
            },
            totalPay() {
                return this.carts.reduce((c1, c2) => c1 + c2.price * c2.num, 0);
            },
            actualPay() {
                return this.totalPay + this.order.postFee - this.order.discount;
            },
            editedAddress(){
                return this.addresses[this.selectedAddress];
            }

        },
        methods: {
            deleteAddress(id){
                if(id == null){
                  alert("该地址出现异常,删除失败");
				};
                ly.http.delete("/user/deleteAdd/"+id).then(()=>{
                    alert("删除成功");
                    this.loadData();
				}).catch(()=>{
				    alert("删除失败");
				})
			},
            loadData(){
                ly.http.get("/item/category/provin").then(res=>{
                    this.provinRows=res.data
                    this.provinList=this.provinRows;
                    this.provinSelected = this.provinList.length>0 ? this.provinRows[0].id : "";
                })
                ly.http.get("/item/category/area").then(res=>{
                    this.areaRows=res.data
                    var val=this.cityList[0].cityid;
                    this.areaList=this.areaRows.filter(function (x) {return x.cityid==val});
                    this.areaSelected = this.areaList.length>0 ? this.areaList[0].id : "";
                })
                ly.http.get("/item/category/city").then(res=>{
                    this.cityRows = res.data
                    var val = this.provinList[0].provinceid;
                    this.cityList = this.cityRows.filter(function (x) { return x.provinceid == val });
                    this.citySelected = this.cityList.length>0 ? this.cityList[0].id : "";
                })
                ly.verifyUser().then(resp => {
                    this.user = resp.data;
                    ly.http.get("/user/address").then(resp=>{
                        this.addresses = resp.data;
                        if(this.addresses.length<1){
                            this.addresses = [{
                                uname:"请添加一个地址!!!!!",
                                an:" ",
                                province:" ",
                                city:" ",
                                uarea:" ",
                                phone:" ",
                                ad:" "
                            }]
                        }
                    })
                    this.carts = ly.store.get("selectedCarts") || []
                }).catch(() => {
                    window.location.href = "/login.html?returnUrl=" + window.location.href;
                })
			},
            addAddress(){
                this.address={
                    uname:"",
                    an:"",
                    province:"",
                    city:"",
                    uarea:""
                }
                this.flag = false;
            },
            changevalue(c){
                this.an=c;
                this.address.an=c
            },
            submitAddress(){
                if(!this.flag){
                    this.address.province=this.provinRows[this.provinSelected-1].province
                    this.address.city=this.cityRows[this.citySelected-1].city
                    this.address.uarea=this.areaRows[this.areaSelected-1].area
                    ly.http.post("/user/addAddress",this.address).then(()=>{
                        alert("添加成功")
                    }).catch(()=>{
                        alert("添加失败")
                    })
                }else{
                    if(this.address.id==null){
                        alert("该地址出现异常,请点击新增收货地址");
                        return ;
					}
                    this.address.province=this.provinRows[this.provinSelected-1].province
                    this.address.city=this.cityRows[this.citySelected-1].city
                    this.address.uarea=this.areaRows[this.areaSelected-1].area
                    ly.http.put("/user/updateAddress ",this.address).then(()=>{
                        alert("更新成功")
                        this.loadData();
                    }).catch(()=>{
                        alert("更新失败")
                    })
                }
                this.loadData();

            },
            submit() {

                //把购物车数据处理成订单详情
                const orderDetails = this.carts.map(({image,ownSpec,price,title,userId, ...rest}) => rest);
                //处理物流信息
                const addr = this.addresses[this.selectedAddress].id;
                if(!addr){
                    alert("请添加一个地址!!");
					return;
				}
                //复制到订单对象
                Object.assign(this. ,{
                    selectedAddress:this.addresses[this.selectedAddress].id,
                    orderDetails
                });
                //提交订单
                ly.http.post("/order/order", this.order, {
                    transformResponse: [
                        //对响应进行处理回调
                        function (data) {
                            //不做任何处理直接返回
                            return data;
                        }
                    ]
                }).then(({data}) => {
                    // 在线支付，需要到付款页
                    window.location = "pay.html?orderId=" + data;
                }).catch((resp) => {
                    alert("订单提交失败，可能是缺货!")
                })
            }
        },
        watch:{

            provinSelected:function(val) {
                this.cityList=[];
                this.cityRows.forEach(city=>{
                    if(city.provinceid==this.provinRows[val-1].provinceid){
                        this.cityList.push(city)
                    }
                })
                this.citySelected = this.cityList.length>0 ? this.cityList[0].id: "";
            },

            citySelected:function (val) {
                this.areaList=[]
                this.areaRows.forEach(area=>{
                    if (area.cityid==this.cityRows[val-1].cityid){
                        this.areaList.push(area)
                    }
                })
                this.areaSelected = this.areaList.length>0 ? this.areaList[0].id : "";
            },
        }
    });
</script>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/pages/getOrderInfo.js"></script>
</body>
</html>